<template>
  <div class="c_item">
      <div class="img">
          <img v-lazy="img" alt="">
           <div class="mask" @click="play">
            <van-icon name="pause-circle" v-if="isPlay" />
            <van-icon name="play" v-else />
          </div>
          
          
      </div>
      <div class="info" @click="goTrack">
          <div class="title">
              {{title}}
          </div>
          <div class="btns">
              <span><i class="font_family icon-a-24gl-play"></i>&nbsp;&nbsp;{{ statCountInfo.playCount | getCount}}</span>
              <span class="mt"><i class="font_family icon-pinglun"></i>&nbsp;&nbsp;{{ statCountInfo.commentCount | getCount}}</span>
              <span><van-icon name="clock-o" />&nbsp;&nbsp;{{duration | formatTime}}</span>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            
        }
    },
    props:{
        duration:{
            type:Number
        },
        id:{
            type:Number,
        },
        img:{
            type:String
        },
        statCountInfo:{
            type:Object
        },
        title:{
            type:String
        },
        playPath:{
            type:String
        },
        isPlay:{
            type:Boolean
        }
    },
    methods:{
        goTrack(){
            this.$router.push("/sound/"+this.id)
        }
        ,
        play(){
            console.log("xxx")
            let flag = !this.isPlay
            
            this.$emit("play-pause",{isPlay:flag,id:this.id,playPath:this.playPath})
        }
    }
}
</script>

<style lang="scss" scoped>
.c_item{
    padding: 15px 0;
    display: flex;
    .img{
        width: 44px;
        height: 44px;
        border-radius: 50%;
        position: relative;
        background:url(../../assets/icon/common/img_load.png) no-repeat;
        background-size: 100% 100%;
        >img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
        .mask{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: rgba(0,0,0,.5);
            text-align: center;
            color: #fff;
            line-height: 44px;
        }
    }
    .info{
        padding-left: 15px;
        flex: 1;
        height: 44px;
        .title{
            color: #40404c;
            font-size: 16px;
            width: 282px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        .btns{
            margin-top: 6px;
            font-size: 12px;
            color: #999;
            line-height: 1.5;
        }
    }
}
.mt{
    margin: 0  14px;
}

</style>

